<template>
    <div>
        <!-- 角色权限设置 -->
        <p>角色权限设置</p>
        <a-table :columns="columns" :dataSource="datas" rowKey="id" >
            <template #caozuo={record}>
                <div v-if="record.name == '超级管理员'">
                    <p>超级管理员不允许修改</p>
                </div>
                <div v-else>
                    <a-button type="primary"  :size="size" @click="putdata(record)">编辑/权限</a-button> &nbsp;&nbsp;
                    <a-button type="primary" danger :size="size" @click="deldata(record.id)" >删除</a-button>
                </div>
            </template>
        </a-table>
        <a-button type="primary" :size="size" @click="AddData()">添加</a-button>
    </div>
</template>

<script setup>
import {toRefs,onMounted,reactive} from 'vue'
import { message } from 'ant-design-vue';
import {getRoleData,putRoleData,delRoleData,postRoleData} from '../../../api/role'
import { useRouter } from 'vue-router'
const router = useRouter()
let query = reactive({datas:[]})



const AddData=()=>{
    router.push({path:'role_qx_add'})
}
const putdata =()=>{
    router.push({path:'role_qx_put'})
}
const deldata=(data)=>{
    delRoleData(data)
}

onMounted(()=>{
    getdata()
})
const getdata = async()=>{
    let {data} = await getRoleData()
    query.datas = data.data
    console.log(data.data);
}

const columns = [
    {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
    },
    {
        title: '角色',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: '关联管理员',
        dataIndex: 'AssociatingAnAdministrator',
        key: 'AssociatingAnAdministrator',
    },
    {
        title: '操作',
        dataIndex: 'id',
        slots:{customRender:'caozuo'}
    },
]
let {datas} = toRefs(query)
</script>

<style scoped>

</style>